import useModal from '@/hooks/modalHook'
import {IconImg} from '../image'
import {CnMediumSpan, CnNormalSpan} from '../text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import './index.less'
import {selectReadMessage} from '@/api/message.ts'

const AlarmAlert = defineComponent({
  setup(props, ctx) {
    const {router} = useGlobalAPI()
    const {visible, openModal, closeModal} = useModal()

    function handleBtnClick(e: MouseEvent) {
      const warningBtn = document.getElementsByClassName('alarmAlert-warningBtn')[0]
      if (e.target === warningBtn) {
        openModal()
      } else {
        closeModal()
      }
    }

    // 刷新消息的点击事件
    const resetMessageClick = () => {
      selectReadMessageFunc()
    }

    // 消息数据列表
    const messageList = ref([])

    // 查询未读消息的函数
    const selectReadMessageFunc = async () => {
      const res = await selectReadMessage()
      console.log(res.data)
      messageList.value = res.data
    }

    onMounted(() => {
      setTimeout(() => {
        selectReadMessageFunc()
      }, 3000)
      window.addEventListener('click', handleBtnClick)
    })

    onUnmounted(() => {
      window.removeEventListener('click', handleBtnClick)
    })

    return () => (
      <div class='relative w-60 h-full flex justify-center items-center'>
        <IconImg imgName='alert' class='alarmAlert-warningBtn w-20 h-20 cursor-pointer'></IconImg>
        {/* <CnMediumSpan class='absolute right-0 top-6  w-30 h-20 rounded-full bg-danger text-white flex justify-center items-center text-12'>
          99+
        </CnMediumSpan> */}
        <div
          class={[
            'absolute top-1/2 right-0 w-420  h-365 transition-all transform translate-y-16 rounded-4 z-10 overflow-hidden pt-46 pb-48 bg-white',
            visible.value ? 'page-show-opacity' : 'hidden'
          ]}
          style={{
            boxShadow: '0px 4px 10px 0px rgba(0,0,0,0.1)'
          }}
        >
          <div
            class='absolute top-0 left-0 w-full h-46 border-b-2 px-16 flex justify-between items-center'
            style={{
              borderColor: '#f1f4f9'
            }}
          >
            <CnMediumSpan class='text-14'>
              未读消息
              {/* （99+） */}
            </CnMediumSpan>

            <CnMediumSpan
              class='text-14 text-primary'
              onClick={() => {
                resetMessageClick
              }}
            >
              <svg
                t='1693893636513'
                class='icon'
                viewBox='0 0 1025 1024'
                version='1.1'
                xmlns='http://www.w3.org/2000/svg'
                p-id='4172'
                width='18'
                height='18'
                class='xs_icon'
              >
                <path
                  d='M857.289 214.7c-67.412-88.192-167.513-151.632-285.807-170.368-244.377-38.706-473.861 128.025-512.567 372.402-38.706 244.377 128.025 473.861 372.402 512.567 146.207 23.157 287.082-27.22 384.961-123.765v0l-72.721-63.227c-76.645 72.541-184.933 109.959-297.222 92.174-192.011-30.412-323.013-210.72-292.601-402.731 30.412-192.011 210.72-323.013 402.731-292.601 91.516 14.495 169.172 63.040 222.099 130.675l-116.628 81.664 267.404 47.151 47.151-267.404-119.2 83.466z'
                  fill='#000000'
                  p-id='4173'
                ></path>
              </svg>
            </CnMediumSpan>
          </div>

          <div class='w-full h-full overflow-auto'>
            {messageList.value.length != 0 ? (
              <div>
                {messageList.value.map(item => (
                  <div
                    class=' w-full h-82 bg-white border-b-2 px-16 flex flex-col justify-center items-center gap-y-4 hover:bg-msgAlert'
                    style={{
                      borderColor: '#f1f4f9'
                    }}
                  >
                    <CnMediumSpan class='block w-full h-22 leading-22 text-xText'>
                      {item.createTime}
                    </CnMediumSpan>
                    <div class='flex items-center gap-x-33'>
                      <CnNormalSpan class='flex-1 w-full h-22 leading-22 text-text '>
                        {item.userLogContent}
                      </CnNormalSpan>
                      {/* <div
                    class='w-64 h-26 bg-white rounded-2 overflow-hidden border-2 flex items-center justify-center cursor-pointer'
                    style={{
                      borderColor: '#e2e2e2'
                    }}
                  >
                    <CnNormalSpan class='text-4xText'>设为已读</CnNormalSpan>
                  </div> */}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div>
                <svg
                  height='100'
                  node-id='1'
                  sillyvg='true'
                  template-height='1024'
                  template-width='1024'
                  version='1.1'
                  viewBox='0 0 1024 1024'
                  width='100'
                  xmlns='http://www.w3.org/2000/svg'
                  xmlns:xlink='http://www.w3.org/1999/xlink'
                  style='margin:0 auto;'
                >
                  <defs node-id='35'>
                    <linearGradient
                      gradientUnits='userSpaceOnUse'
                      id='SVGID_1_'
                      node-id='6'
                      spreadMethod='pad'
                      x1='512'
                      x2='512'
                      y1='663.5865'
                      y2='978.8405'
                    >
                      <stop offset='0' stop-color='#dee3f0'></stop>
                      <stop offset='0.03981841' stop-color='#e1e6f1' stop-opacity='0.9602'></stop>
                      <stop offset='0.3162' stop-color='#f2f4f9' stop-opacity='0.6838'></stop>
                      <stop offset='0.6198' stop-color='#fcfcfe' stop-opacity='0.3802'></stop>
                      <stop offset='1' stop-color='#ffffff' stop-opacity='0'></stop>
                    </linearGradient>
                    <linearGradient
                      gradientUnits='userSpaceOnUse'
                      id='SVGID_2_'
                      node-id='22'
                      spreadMethod='pad'
                      x1='382.2682'
                      x2='382.2682'
                      y1='632.5847'
                      y2='197.6453'
                    >
                      <stop offset='0' stop-color='#9caaba'></stop>
                      <stop offset='1' stop-color='#c2c9d6'></stop>
                    </linearGradient>
                    <linearGradient
                      gradientUnits='userSpaceOnUse'
                      id='SVGID_3_'
                      node-id='26'
                      spreadMethod='pad'
                      x1='396.1227'
                      x2='396.1227'
                      y1='632.5848'
                      y2='197.6453'
                    >
                      <stop offset='0' stop-color='#abb8c9'></stop>
                      <stop offset='1' stop-color='#cfd5e0'></stop>
                    </linearGradient>
                    <linearGradient
                      gradientUnits='userSpaceOnUse'
                      id='SVGID_4_'
                      node-id='30'
                      spreadMethod='pad'
                      x1='-95.7718'
                      x2='-95.7718'
                      y1='610.1266'
                      y2='804.751'
                    >
                      <stop offset='0' stop-color='#e1e7f2'></stop>
                      <stop offset='1' stop-color='#b7bfc9'></stop>
                    </linearGradient>
                  </defs>
                  <g node-id='100'>
                    <path
                      d='M 987.20 821.20 C 987.20 863.00 937.13 903.08 848.02 932.64 C 758.90 962.20 638.03 978.80 512.00 978.80 C 385.97 978.80 265.10 962.20 175.98 932.64 C 86.87 903.08 36.80 863.00 36.80 821.20 C 36.80 779.40 86.87 739.32 175.98 709.76 C 265.10 680.20 385.97 663.60 512.00 663.60 C 638.03 663.60 758.90 680.20 848.02 709.76 C 937.13 739.32 987.20 779.40 987.20 821.20 Z'
                      fill='url(#SVGID_1_)'
                      fill-rule='nonzero'
                      group-id='1'
                      node-id='70'
                      stroke='none'
                      target-height='315.2'
                      target-width='950.4'
                      target-x='36.8'
                      target-y='663.6'
                    ></path>
                    <g node-id='101'>
                      <path
                        d='M 192.10 675.40 C 192.10 699.20 172.80 718.50 149.00 718.50 C 125.20 718.50 105.90 699.20 105.90 675.40 C 105.90 651.60 125.20 603.80 149.00 603.80 C 172.80 603.80 192.10 651.60 192.10 675.40 Z'
                        fill='#e6eaf0'
                        fill-rule='nonzero'
                        group-id='1,2'
                        node-id='74'
                        stroke='none'
                        target-height='114.70001'
                        target-width='86.200005'
                        target-x='105.9'
                        target-y='603.8'
                      ></path>
                      <path
                        d='M 168.70 669.50 C 167.30 668.80 165.70 669.40 165.00 670.80 L 151.70 697.70 L 151.70 647.00 C 151.70 645.50 150.50 644.20 148.90 644.20 C 147.40 644.20 146.10 645.40 146.10 647.00 L 146.10 673.00 L 131.90 658.80 C 130.80 657.70 129.10 657.70 128.00 658.80 C 126.90 659.90 126.90 661.60 128.00 662.70 L 145.10 679.80 C 145.40 680.10 145.70 680.10 146.10 680.20 L 146.10 755.30 C 146.10 756.80 147.30 758.10 148.90 758.10 C 150.40 758.10 151.70 756.90 151.70 755.30 L 151.70 710.10 L 169.90 673.20 C 170.60 671.90 170.10 670.20 168.70 669.50 Z'
                        fill='#d0d6e0'
                        fill-rule='nonzero'
                        group-id='1,2'
                        node-id='76'
                        stroke='none'
                        target-height='113.89996'
                        target-width='43.700005'
                        target-x='126.9'
                        target-y='644.2'
                      ></path>
                    </g>
                    <g node-id='102'>
                      <path
                        d='M 880.20 680.70 C 880.20 700.20 864.40 715.90 845.00 715.90 C 825.50 715.90 809.80 700.10 809.80 680.70 C 809.80 661.30 825.60 622.20 845.00 622.20 C 864.40 622.20 880.20 661.20 880.20 680.70 Z'
                        fill='#e6eaf0'
                        fill-rule='nonzero'
                        group-id='1,3'
                        node-id='81'
                        stroke='none'
                        target-height='93.70001'
                        target-width='70.400024'
                        target-x='809.8'
                        target-y='622.2'
                      ></path>
                      <path
                        d='M 861.10 675.90 C 860.00 675.40 858.60 675.80 858.10 676.90 L 847.30 698.80 L 847.30 657.40 C 847.30 656.20 846.30 655.20 845.10 655.20 C 843.90 655.20 842.90 656.20 842.90 657.40 L 842.90 678.60 L 831.30 667.00 C 830.40 666.10 829.00 666.10 828.10 667.00 C 827.20 667.90 827.20 669.30 828.10 670.20 L 842.10 684.20 C 842.30 684.40 842.60 684.40 842.90 684.50 L 842.90 745.80 C 842.90 747.00 843.90 748.00 845.10 748.00 C 846.30 748.00 847.30 747.00 847.30 745.80 L 847.30 709.00 L 862.20 678.90 C 862.60 677.80 862.20 676.40 861.10 675.90 Z'
                        fill='#d0d6e0'
                        fill-rule='nonzero'
                        group-id='1,3'
                        node-id='83'
                        stroke='none'
                        target-height='92.79999'
                        target-width='35.399963'
                        target-x='827.2'
                        target-y='655.2'
                      ></path>
                    </g>
                    <g node-id='103'>
                      <path
                        d='M 926.90 766.70 C 926.90 781.20 915.10 793.00 900.60 793.00 C 886.10 793.00 874.30 781.20 874.30 766.70 C 874.30 752.20 886.10 723.10 900.60 723.10 C 915.10 723.10 926.90 752.20 926.90 766.70 Z'
                        fill='#e6eaf0'
                        fill-rule='nonzero'
                        group-id='1,4'
                        node-id='88'
                        stroke='none'
                        target-height='69.900024'
                        target-width='52.600037'
                        target-x='874.3'
                        target-y='723.1'
                      ></path>
                      <path
                        d='M 912.60 763.10 C 911.80 762.70 910.80 763.00 910.40 763.90 L 902.30 780.30 L 902.30 749.40 C 902.30 748.50 901.50 747.70 900.60 747.70 C 899.70 747.70 898.90 748.50 898.90 749.40 L 898.90 765.20 L 890.30 756.60 C 889.60 755.90 888.60 755.90 887.90 756.60 C 887.20 757.30 887.20 758.30 887.90 759.00 L 898.30 769.40 C 898.50 769.60 898.70 769.60 898.90 769.60 L 898.90 815.40 C 898.90 816.30 899.70 817.10 900.60 817.10 C 901.50 817.10 902.30 816.30 902.30 815.40 L 902.30 787.90 L 913.40 765.40 C 913.80 764.50 913.40 763.50 912.60 763.10 Z'
                        fill='#d0d6e0'
                        fill-rule='nonzero'
                        group-id='1,4'
                        node-id='90'
                        stroke='none'
                        target-height='69.39996'
                        target-width='26.599976'
                        target-x='887.2'
                        target-y='747.7'
                      ></path>
                    </g>
                  </g>
                  <path
                    d='M 533.70 560.00 C 571.70 521.60 595.10 468.80 595.10 410.50 C 595.10 293.00 499.80 197.70 382.30 197.70 C 264.80 197.70 169.50 293.00 169.50 410.50 C 169.50 528.00 264.80 623.30 382.30 623.30 C 416.20 623.30 448.30 615.30 476.70 601.20 L 547.50 632.20 C 547.50 632.20 547.70 632.20 547.90 632.30 L 547.90 632.50 L 564.30 632.50 L 564.30 620.30 L 552.40 620.30 C 548.10 606.50 537.00 570.90 533.70 560.00 Z M 328.00 442.50 C 312.80 442.50 300.60 430.20 300.60 415.10 C 300.60 399.90 312.90 387.70 328.00 387.70 C 343.10 387.70 355.40 400.00 355.40 415.10 C 355.50 430.30 343.20 442.50 328.00 442.50 Z M 464.20 442.50 C 449.00 442.50 436.80 430.20 436.80 415.10 C 436.80 399.90 449.10 387.70 464.20 387.70 C 479.30 387.70 491.60 400.00 491.60 415.10 C 491.60 430.30 479.40 442.50 464.20 442.50 Z'
                    fill='url(#SVGID_2_)'
                    fill-rule='nonzero'
                    node-id='94'
                    stroke='none'
                    target-height='434.8'
                    target-width='425.59998'
                    target-x='169.5'
                    target-y='197.7'
                  ></path>
                  <path
                    d='M 547.50 560.00 C 585.50 521.60 608.90 468.80 608.90 410.50 C 608.90 293.00 513.60 197.70 396.10 197.70 C 278.60 197.70 183.30 293.00 183.30 410.50 C 183.30 528.00 278.60 623.30 396.10 623.30 C 430.00 623.30 462.10 615.30 490.50 601.20 L 561.30 632.20 C 561.30 632.20 570.70 634.90 567.40 624.10 C 564.60 614.90 551.30 572.10 547.50 560.00 Z M 328.00 442.50 C 312.80 442.50 300.60 430.20 300.60 415.10 C 300.60 399.90 312.90 387.70 328.00 387.70 C 343.10 387.70 355.40 400.00 355.40 415.10 C 355.50 430.30 343.20 442.50 328.00 442.50 Z M 464.20 442.50 C 449.00 442.50 436.80 430.20 436.80 415.10 C 436.80 399.90 449.10 387.70 464.20 387.70 C 479.30 387.70 491.60 400.00 491.60 415.10 C 491.60 430.30 479.40 442.50 464.20 442.50 Z'
                    fill='url(#SVGID_3_)'
                    fill-rule='nonzero'
                    node-id='96'
                    stroke='none'
                    target-height='437.2'
                    target-width='425.60004'
                    target-x='183.3'
                    target-y='197.7'
                  ></path>
                  <path
                    d='M 627.50 801.00 C 626.00 805.80 630.20 804.60 630.20 804.60 L 661.90 790.70 C 674.60 797.00 689.00 800.60 704.20 800.60 C 756.80 800.60 799.40 758.00 799.40 705.40 C 799.40 652.80 756.80 610.20 704.20 610.20 C 651.60 610.20 609.00 652.80 609.00 705.40 C 609.00 731.50 619.50 755.10 636.50 772.30 C 634.80 777.70 628.80 796.80 627.50 801.00 Z M 722.40 707.40 C 722.40 700.60 727.90 695.10 734.70 695.10 C 741.50 695.10 747.00 700.60 747.00 707.40 C 747.00 714.20 741.50 719.70 734.70 719.70 C 727.90 719.70 722.40 714.20 722.40 707.40 Z M 661.50 707.40 C 661.50 700.60 667.00 695.10 673.80 695.10 C 680.60 695.10 686.10 700.60 686.10 707.40 C 686.10 714.20 680.60 719.70 673.80 719.70 C 667.00 719.70 661.50 714.20 661.50 707.40 Z'
                    fill='url(#SVGID_4_)'
                    fill-rule='nonzero'
                    node-id='98'
                    stroke='none'
                    target-height='195.59998'
                    target-width='190.40002'
                    target-x='609'
                    target-y='610.2'
                  ></path>
                </svg>
                <div style='text-align:center;'>
                  <CnMediumSpan class='text-20'>暂无消息</CnMediumSpan>
                </div>
              </div>
            )}
          </div>
          {messageList.value.length > 3 ? <div class='sl_box'>......</div> : null}
          <div
            class='absolute bottom-0 left-0 w-full h-50 px-16 flex items-center border-t-2'
            style={{
              borderColor: '#f1f4f9'
            }}
          >
            {/* <div class='flex-1 h-50 flex justify-center items-center cursor-pointer'>
              <CnMediumSpan class='text-14 text-primary'>全部已读</CnMediumSpan>
            </div> */}
            <div class='flex-1 h-50 flex justify-center items-center cursor-pointer'>
              <CnMediumSpan
                class='text-14 text-primary'
                onClick={() => {
                  router.push({
                    path: '/userLog/home'
                  })
                }}
              >
                查看全部
              </CnMediumSpan>
            </div>
          </div>
        </div>
      </div>
    )
  }
})

export default AlarmAlert
